<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element Controller</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <!-- Header -->
    <header class="header">
      <h1 class="title">元素控制器</h1>
      <div class="current-page">
        <span class="page-url" id="currentUrl">Loading...</span>
        <span class="match-status" id="matchStatus">无匹配规则</span>
      </div>
    </header>

    <!-- Navigation Tabs -->
    <nav class="tabs">
      <button class="tab-button active" data-tab="url-rules">网址规则</button>
      <button class="tab-button" data-tab="element-rules">元素规则</button>
    </nav>

    <!-- URL Rules Tab -->
    <div class="tab-content active" id="url-rules">
      <div class="actions">
        <button class="btn btn-primary" id="addUrlRule">
          <span class="icon">+</span>
          添加网址规则
        </button>
      </div>

      <div class="table-container">
        <table class="rules-table" id="urlRulesTable">
          <thead>
            <tr>
              <th>模式</th>
              <th>状态</th>
              <th>元素数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="urlRulesBody">
            <!-- URL rules will be populated here -->
          </tbody>
        </table>
        <div class="empty-state" id="urlRulesEmpty">
          <div class="empty-icon">🎯</div>
          <p>暂无网址规则</p>
          <button class="btn btn-primary" onclick="document.getElementById('addUrlRule').click()">
            创建第一个规则
          </button>
        </div>
      </div>
    </div>

    <!-- Element Rules Tab -->
    <div class="tab-content" id="element-rules">
      <div class="element-rules-header">
        <select class="url-selector" id="urlSelector">
          <option value="">选择网址规则...</option>
        </select>
        <button class="btn btn-primary" id="addElementRule" disabled>
          <span class="icon">+</span>
          添加元素规则
        </button>
      </div>

      <div class="table-container">
        <table class="rules-table" id="elementRulesTable">
          <thead>
            <tr>
              <th>选择器</th>
              <th>操作</th>
              <th>匹配数</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="elementRulesBody">
            <!-- Element rules will be populated here -->
          </tbody>
        </table>
        <div class="empty-state" id="elementRulesEmpty">
          <div class="empty-icon">🎛️</div>
          <p>暂无元素规则</p>
          <p class="empty-subtitle">请先选择上方的网址规则</p>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
      <div class="stats">
        <span class="stat">
          <span class="stat-value" id="totalUrlRules">0</span>
          <span class="stat-label">网址规则</span>
        </span>
        <span class="stat">
          <span class="stat-value" id="totalElementRules">0</span>
          <span class="stat-label">元素规则</span>
        </span>
        <span class="stat">
          <span class="stat-value" id="activeRules">0</span>
          <span class="stat-label">活跃</span>
        </span>
      </div>
    </footer>
  </div>

  <!-- Modals -->
  
  <!-- URL Rule Modal -->
  <div class="modal" id="urlRuleModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="urlModalTitle">添加网址规则</h3>
        <button class="modal-close" id="closeUrlModal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="urlPattern">网址模式:</label>
          <input type="text" id="urlPattern" class="form-input" placeholder="例如: *.example.com/*">
          <div class="help-text">
            使用 * 作为通配符。示例: *.google.com/*, https://example.com/page/*
          </div>
          <div class="url-testing">
            <button type="button" class="btn btn-secondary" id="testUrlPattern">测试模式匹配</button>
          </div>
          <div class="pattern-suggestions" id="patternSuggestions"></div>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="urlRuleEnabled" checked>
            <span class="checkmark"></span>
            启用此规则
          </label>
        </div>

        <div class="validation-status" id="urlValidation"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" id="cancelUrlRule">取消</button>
        <button class="btn btn-primary" id="saveUrlRule">保存</button>
      </div>
    </div>
  </div>

  <!-- Element Rule Modal -->
  <div class="modal" id="elementRuleModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="elementModalTitle">添加元素规则</h3>
        <button class="modal-close" id="closeElementModal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="elementSelector">CSS 选择器:</label>
          <input type="text" id="elementSelector" class="form-input" placeholder="例如: .advertisement, #sidebar">
          <div class="help-text">
            使用 CSS 选择器。示例: .class, #id, div[data-role="ad"]
          </div>
        </div>
        
        <div class="form-group">
          <label for="elementAction">操作:</label>
          <select id="elementAction" class="form-select">
            <option value="hide">隐藏元素</option>
            <option value="show">显示元素</option>
          </select>
        </div>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" id="elementRuleEnabled" checked>
            <span class="checkmark"></span>
            启用此规则
          </label>
        </div>

        <div class="element-testing">
          <button class="btn btn-secondary" id="testSelector">测试选择器</button>
          <button class="btn btn-secondary" id="highlightElements">高亮元素</button>
        </div>

        <div class="validation-status" id="elementValidation"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" id="cancelElementRule">取消</button>
        <button class="btn btn-primary" id="saveElementRule">保存</button>
      </div>
    </div>
  </div>

  <!-- Confirmation Modal -->
  <div class="modal" id="confirmModal">
    <div class="modal-content modal-small">
      <div class="modal-header">
        <h3 id="confirmTitle">确认操作</h3>
        <button class="modal-close" id="closeConfirmModal">&times;</button>
      </div>
      <div class="modal-body">
        <p id="confirmMessage">您确定要执行此操作吗?</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" id="cancelConfirm">取消</button>
        <button class="btn btn-danger" id="confirmAction">确认</button>
      </div>
    </div>
  </div>

  <!-- Loading overlay -->
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
  </div>

  <!-- Toast notifications -->
  <div class="toast-container" id="toastContainer"></div>

  <script src="../utils/storage.js"></script>
  <script src="../utils/urlMatcher.js"></script>
  <script src="../utils/elementController.js"></script>
  <script src="popup.js"></script>
</body>
</html>